<script setup lang="ts">
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import sheep from "@/sheep";
// #ifdef H5
sheep.$store("user").isLogin = true;
sheep.$store("user").userInfo = {
  "company_id": "1",
  "createtime": "2025-05-16 17:21:05",
  "cu_email": "13015125836@163.com",
  "cu_id": "1",
  "cu_job": "总经理",
  "cu_name": "企业测试人员",
  "cu_phone": "13154804087",
  "cu_role": "1",
  "cu_status": "0",
  "del_type": "0",
  "people_id": "1",
  "updatetime": "2025-05-16 17:21:05",
  "user_id": "2",
  "wx_avatarUrl": "https://assess.yuejin-tech.com/upload/avatarUrl/9.jpg",
  "wx_id": "3",
  "wx_openId": "",
  "wx_pawd": "$2y$10$8Crykn6qRsQr1Xv5TCZesOX0sgb174wN67MgCpN4iOOfDR85dJ/vq",
  "wx_type": "1",
  "wx_user": "qy"
};
sheep.$store("app").template.basic.tabbar.list =
  sheep.$store("app").template.basic.tabbar.qylist;
// #endif

// // 定义 content 变量
const content = ref();
// "First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。"

const companyInfo = reactive({
  id: 0,
  name: "",
  logo: "",
  address: "",
  legal: "",
  //所属行业
  category_id_f: "",
  operate: "",
  phone: "",
  risk_rank: "",
  risk_type: "",
  category_id_c: " ",
  deptInfo: {},
  thirdPartyInfo: {},
});

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();

// 评分
const score = ref({})

// 创建事件监听函数
const handleDataUpdate = (event) => {
  console.log('首页收到数据更新事件，准备刷新数据', event);
  // 使用延迟确保DOM已完全渲染
  setTimeout(() => {
    console.log('开始刷新首页数据');
    // 根据模块类型选择刷新的数据
    if (event && event.moduleType) {
      // 如果是应急演练模块，则获取评分数据
      const params = {
        company_id: sheep.$store("user").userInfo.company_id,
      };
      sheep.$api.qy_index.getTaskInfo(params).then((res) => {
        score.value = res.data;
      });
    } else {
      // 刷新所有数据
      company();
      get();
      const params = {
        company_id: sheep.$store("user").userInfo.company_id,
      };
      sheep.$api.qy_index.getTaskInfo(params).then((res) => {
        score.value = res.data;
      });
    }
  }, 100); // 短暂延迟确保DOM已渲染
};

// 在页面卸载时移除事件监听
onUnload(() => {
  console.log('首页卸载，移除事件监听');
  uni.$off('emergencyDataUpdated', handleDataUpdate);
  uni.$off('securityDataUpdated', handleDataUpdate);
  uni.$off('hiddendangerDataUpdated', handleDataUpdate);
});

onLoad(() => {
  //获取公司信息
  company();
  //获取通知信息
  get();
  //评分
  const params = {
    company_id: sheep.$store("user").userInfo.company_id,
  };
  sheep.$api.qy_index.getTaskInfo(params).then((res) => {
    score.value = res.data
  });
  
  // 注册事件监听
  uni.$on('emergencyDataUpdated', handleDataUpdate);
  uni.$on('securityDataUpdated', handleDataUpdate);
  uni.$on('hiddendangerDataUpdated', handleDataUpdate);
});
const company = () => {
  const params = {
    company_id: sheep.$store("user").userInfo.company_id,
  };
  sheep.$api.qy_index.detail(params).then((res: any) => {
    companyInfo.name = res.data.c_name;
    companyInfo.address = res.data.c_address;
    companyInfo.category_id_f = res.data.category_id_f;
    companyInfo.legal = res.data.c_legal;
    companyInfo.operate = res.data.c_operate;
    companyInfo.phone = res.data.c_tel;
    companyInfo.risk_rank = res.data.c_risk_rank;
    companyInfo.risk_type = res.data.c_risk_type;
    companyInfo.c_image = res.data.c_image;
    companyInfo.category_id_c = res.data.category_id_c;
    companyInfo.deptInfo = res.data.deptInfo;
    companyInfo.thirdPartyInfo = res.data.thirdPartyInfo
    console.log("companyInfo", companyInfo);
  });
};
//跳转企业详细页面
const companyDetail = () => {
  uni.navigateTo({
    url: `/pages/qy/detail?companyId=${
      sheep.$store("user").userInfo.company_id
    }`,
  });
};
//跳转隐患排查页面
const navigateToInspection = () => {
  uni.navigateTo({
    url: "/pages/qy/hiddendanger/list",
  });
};

//跳转应急演练页面
const emergencyDrill = () => {
  uni.navigateTo({
    url: "/pages/qy/emergency/list",
  });
};

//跳转安全培训页面
const safetyTraining = () => {
  uni.navigateTo({
    url: "/pages/qy/security/list",
  });
};

//跳转至任务列表页面
const navigateToTaskList = () => {
  uni.navigateTo({
    url: "/pages/qy/task/list",
  });
};

function get() {
  const params = {
    wx_type: sheep.$store("user").userInfo.wx_type,
  };
  sheep.$api.qy_noticelist.list(params).then((res) => {
    console.log("listData", res);
    content.value = res.notice_info[0].n_title;
  });
}
</script>

<template>
  <!-- 顶部导航栏 -->
  <!-- <view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }"> -->
  <!-- logo文字 -->
  <!-- <view class="logo">
      <text class="logo-text">消防</text>
      <text class="logo-text2">企业管</text>
      <text class="logo-text3">理</text>
    </view> -->

  <!-- </view> -->
  <s-layout title="首页" tabbar="/pages/qy/index">
    <view class="viewport">
      <!-- 企业信息模块 -->
      <view class="enterprise-card">
        <!-- 标题区 -->
        <view class="carousel-title"> </view>
        <!-- 内容区 -->
        <view class="card-body">
          <!-- 企业LOGO与名称 -->
          <view class="enterprise-profile">
            <view style="display: flex; align-items: center">
              <image
                class="enterprise-logo"
                :src="companyInfo.c_image"
                mode="aspectFit"
              />
              <view class="enterprise-name-box">
                <text class="enterprise-name">{{ companyInfo.name }}</text>
                <!-- <view style="display: flex; margin-top: 10rpx">
                  <view
                    style="
                      font-size: 23rpx;
                      font-weight: 500;
                      margin-left: 16px;
                    "
                    >法人：</view
                  >
                  <view class="list-item-right-tag-box2">
                    <view class="list-item-right-tag-box-text2 center">
                      <view>{{ companyInfo.legal }}</view>
                    </view>
                  </view>
                </view> -->
              </view>
            </view>
            <view>
              <view class="enterprise-info" @click="companyDetail">
                <view class="enterprise-info-txt">完善信息</view>
                <image
                  class="enterprise-info-image"
                  src="@/static/tabs/更多.png"
                  mode="scaleToFill"
                />
              </view>
            </view>
          </view>

          <!-- 关键信息网格 -->
          <view class="info-grid">
            <view class="info-item">
              <fui-icon name="industry" color="#5289ff" :size="40"></fui-icon>
              <view class="item-content">
                <view class="item-label">经营内容:</view>
                <view class="item-value">{{ companyInfo.operate }}</view>
              </view>
            </view>

            <view class="divider"></view>

            <view class="info-item">
              <fui-icon name="industry" color="#5289ff" :size="40"></fui-icon>
              <view class="item-content">
                <view class="item-label">经营地址:</view>
                <view class="item-value">{{ companyInfo.address }}</view>
              </view>
            </view>
          </view>
          <view style="height: 10rpx"></view>
        </view>
      </view>

      <!-- 通知 -->
      <view
        class="notice-bar"
        @tap="sheep.$router.go('/pages/qy/noticelist', {})"
      >
        <fui-notice-bar background="#ECF5FF" color="#1990FF" :content="content" :speed="50" scrollable>
          <view class="fui-icon__box">
            <fui-icon name="notice" :size="36" color="#000000"></fui-icon>
          </view>
        </fui-notice-bar>
      </view>

      <!-- Container for the Affiliation Section -->
      <view class="affiliation-container">
        <view class="bottom radius">
          <view class="center-title">
            <!-- Wrapper for side-by-side cards -->
            <view class="cards-wrapper">
              <!-- 消防站 Section -->
              <view class="form-card">
                <view class="department-container">
                  <!-- 消防站信息卡片 -->
                  <view class="">
                    <!-- 头部 -->
                    <view class="card-header2">
                      <view class="fire-icon">🚒</view>
                      <view class="header-info">
                        <text class="department-name">消防监管人员</text>
                        <!-- <view class="status-tag">{{ companyInfo.deptInfo.status }}</view> -->
                      </view>
                    </view>
                    <!-- 联系方式 (Address Removed) -->
                    <view class="contact-section">
                      <!-- Removed Address Item -->
                      <view class="contact-item">
                        <!-- <text class="contact-icon" style="font-size: 26rpx"
                          >联系人:
                        </text> -->
                        <text class="contact-info" style="font-size: 26rpx">{{companyInfo.deptInfo.address}}{{
                          companyInfo.deptInfo.dept+'-'+companyInfo.deptInfo.name || "无"
                        }}</text>
                        
                      </view>
                      <view class="contact-item">
                        <!-- <text class="contact-icon" style="font-size: 26rpx"
                          >联系电话：</text
                        > -->
                        <text class="contact-info" style="font-size: 26rpx">{{
                          companyInfo.deptInfo.phone || "无"
                        }}</text>
                      </view>
                     
                    </view>
                  </view>
                </view>
              </view>
              <!-- 第三方企业 Section -->
              <view class="form-card">
                <view v-if="companyInfo.thirdPartyInfo">
                  <view class="department-container">
                    <!-- 第三方企业信息卡片 -->
                    <view class="">
                      <!-- 头部 -->
                      <view class="card-header2">
                        <view class="company-icon">🏢</view>
                        <view class="header-info">
                          <text class="department-name">第三方服务企业</text>
                          <!-- <view class="status-tag">{{ companyInfo.thirdPartyInfo.status }}</view> -->
                        </view>
                      </view>
                      <!-- 联系方式 (Address Removed) -->
                      <view class="contact-section">
                        <!-- Removed Address Item -->
                        <view class="contact-item">
                          <!-- <text class="contact-icon" style="font-size: 26rpx"
                            >公司:
                          </text> -->
                          <text class="contact-info" style="font-size: 26rpx">{{
                            companyInfo.thirdPartyInfo.name || "无"
                          }}</text>
                        </view>
                        <view class="contact-item">
                          <!-- <text class="contact-icon" style="font-size: 26rpx"
                            >联系电话：</text
                          > -->
                          <text class="contact-info" style="font-size: 26rpx;">{{
                            companyInfo.thirdPartyInfo.phone || "无"
                          }}</text>
                        </view>
                        
                      </view>
                    </view>
                  </view>
                </view>
                <view class="empty-state" style="font-size: 26rpx" v-else>
                  <text>暂无第三方企业信息</text>
                </view>
              </view>
            </view>
            <!-- End cards-wrapper -->
          </view>
          <!-- Add some bottom padding if needed inside the card -->
          <!-- <view style="height: 20rpx"></view> -->
          <!-- Removed extra bottom padding view, handled by .bottom.radius padding-bottom -->
        </view>
      </view>

      <!-- 工作区 -->
      <view class="work-area-box">
        <view class="carousel-title">
          <text class="card-title">工作区</text>
        </view>
        <view class="work-area">
          <view class="work-area-item" @click="navigateToInspection">
            <image src="@/static/tabs/隐患排查.png" mode="scaleToFill" />
            <view class="work-area-item" style="font-size: 26rpx"
              >隐患排查</view
            >
          </view>
          <view class="work-area-item" @click="emergencyDrill">
            <image src="@/static/tabs/应急演练.png" mode="scaleToFill" />
            <view class="work-area-item" style="font-size: 26rpx"
              >应急演练</view
            >
          </view>
          <view class="work-area-item" @click="safetyTraining">
            <image src="@/static/tabs/安全培训.png" mode="scaleToFill" />
            <view class="work-area-item" style="font-size: 26rpx"
              >安全培训</view
            >
          </view>
        </view>
      </view>

      <!-- 检查评估 -->
      <view class="work-area-box">
        <view class="carousel-title">
          <text class="card-title">评估情况</text>
        </view>
        <view class="assessment-container">
          <view class="assessment-stats">
            <view class="stat-item">
              <view class="stat-number">{{score.all_count}}</view>
              <view class="stat-label">总任务数</view>
            </view>
            <view class="stat-item">
              <view class="stat-number">{{score.run_count}}</view>
              <view class="stat-label">进行中</view>
            </view>
            <view class="stat-item">
              <view class="stat-number">{{score.dai_count}}</view>
              <view class="stat-label">待开始</view>
            </view>
          </view>
          
          <view class="view-more" @click="navigateToTaskList">
            <text>查看更多</text>
            <fui-icon name="arrowright" :size="32" color="#5289ff"></fui-icon>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<style lang="scss">
page {
  background-color: #f0f3f8;
  height: 100%;
}
// 卡片容器
.enterprise-card {
  background: #ffffff;
  border-radius: 5px;
  width: 96%;
  margin: 0 auto;
  margin-top: 15rpx;
  box-shadow: 0 12rpx 48rpx rgba(82, 137, 255, 0.08);
}
@font-face {
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  src: url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/rrtM1LP5iUzZ.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/o0Q3cO7cUfPA.woff")
      format("woff");
  font-display: swap;
}
// 头部区域
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
// 轮播图区域
.carousel-title {
  padding: 10px;
}

.card-title {
  font-size: 32rpx;
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  color: #333;
  position: relative;
  padding-left: 20rpx;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 40rpx;
    background: #2979ff;
    border-radius: 8rpx;
  }

  .management-tag {
    display: flex;
    align-items: center;
    padding: 12rpx 24rpx;
    background: rgba(82, 137, 255, 0.06);
    border-radius: 8rpx;

    .tag-text {
      font-size: 28rpx;
      color: #666;
      margin-right: 16rpx;
    }
  }
}

.list-item-right-tag-box2 {
  background-color: #dee6f7;
  display: inline-block;
  margin-bottom: 5rpx;
  padding: 3rpx 13rpx;
  border-radius: 8px;
  margin-right: 10rpx;
}

.list-item-right-tag-box-text2 {
  height: 30rpx;
  font-size: 20rpx;
  font-weight: 550;
  color: #0038b1;
}
// 主体内容
.card-body {
  width: 94%;
  margin: 10rpx auto;

  // 企业LOGO与名称
  .enterprise-profile {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    justify-content: space-between;
    .enterprise-logo {
      width: 120rpx;
      height: 120rpx;
      border-radius: 24rpx;
      border: 2rpx solid #f0f3f8;
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
    }

    .enterprise-name {
      display: inline-block;
      max-width: 10em; /* 中文约10字 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      font-size: 36rpx;
      font-weight: 600;
      color: #1a1a1a;
      margin-left: 32rpx;
    }
  }

  // 信息网格布局
  .info-grid {
    background: #fafbff;
    border-radius: 16rpx;
    padding: 5rpx;
    margin-bottom: 20rpx;
    box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.15);
    .info-item {
      // display: flex;
      // align-items: center;
      padding: 12rpx 0;

      .item-content {
        margin-left: 24rpx;
        display: flex;
        .item-label {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 8rpx;
        }

        .item-value {
          margin-left: 10rpx;
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          overflow: hidden; /* 隐藏溢出内容 */
          white-space: nowrap; /* 禁止换行 */
          text-overflow: ellipsis; /* 显示省略号 */
          width: 80%; /* 必须设置宽度 */
        }
      }
    }

    .divider {
      height: 2rpx;
      background: #f0f3f8;
    }
  }

  // 营业执照区域
  .license-section {
    width: 90%;
    margin: 15rpx auto;
  }
  .section-title {
    font-size: 28rpx;
    padding-left: 40rpx;
    position: relative;

    &::before {
      content: "📷";
      position: absolute;
      left: 0;
      top: 1rpx;
    }
  }

  .license-image {
    width: 100%;
    margin: 20rpx auto;
    height: 250rpx;
    border-radius: 24rpx;
    background: #f8f9ff;
  }
}

/* 自定义导航条 */
.navbar {
  // SAIL-0004 scss引入本地图片
  // background-image: url(@/static/images/navigator_bg.png);
  // background-image: url(@/static/images/navigator_bg.png);
  background: linear-gradient(
    to bottom,
    #5289ff 0%,
    #7aabff 30%,
    #a3c7ff 50%,
    #f0f3f8 100%
  );
  // linear-gradient(to bottom, #007BFF, #f0f3f8);
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  .logo {
    padding-left: 20rpx;
    .logo-text {
      flex: 1;
      background: linear-gradient(90deg, #0056e3, #333); /* 渐变背景 */
      -webkit-background-clip: text; /* 将背景裁剪到文字 */
      -webkit-text-fill-color: transparent; /* 文字颜色透明，显示背景渐变 */
      font-size: 22px;
      margin: 0 0 0 0;
      font-family: "阿里妈妈数黑体 Bold";
      font-weight: 700;
    }
    .logo-text2 {
      flex: 1;
      color: #333; /* 渐变背景 */
      font-size: 23px;
      margin: 0 0 0 0;
      font-family: "阿里妈妈数黑体 Bold";
      font-weight: 700;
    }
    .logo-text3 {
      flex: 1;
      background: linear-gradient(90deg, #333, #ff9800); /* 渐变背景 */
      -webkit-background-clip: text; /* 将背景裁剪到文字 */
      -webkit-text-fill-color: transparent; /* 文字颜色透明，显示背景渐变 */
      font-size: 23px;
      margin: 0 0 0 0;
      font-family: "阿里妈妈数黑体 Bold";
      font-weight: 700;
    }
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10rpx 0 26rpx;
    height: 64rpx;
    margin: 16rpx 20rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .icon-search {
    &::before {
      margin-right: 10rpx;
    }
  }
  .icon-scan {
    font-size: 30rpx;
    padding: 15rpx;
  }
}
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  src: url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/y1tmUV8ZoHam.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/uZ2UDI4XpdoS.woff")
      format("woff");
  font-display: swap;
}
// 通告栏
.fui-icon__box {
  padding-left: 24rpx;
  padding-right: 12rpx;
}
.notice-bar {
  width: 96%;
  margin: auto;
  border-radius: 5px;
  margin-top: 10rpx;
}
// 工作区
.work-area {
  display: flex;
  justify-content: space-around;
}
.work-area-box {
  width: 96%;
  margin: 10rpx auto;
  background-color: #fff;
  border-radius: 5px;
  padding-bottom: 30rpx;
}
.work-area-item {
  display: flex;
  font-size: 26rpx;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #333333;
}
.work-area-item image {
  width: 55px;
  height: 55px;
}

.work-area-inner-box {
  width: 96%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* 评估情况样式 */
.assessment-container {
  padding: 20rpx;
}

.assessment-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 48rpx;
  font-weight: 700;
  color: #5289ff;
  line-height: 1.2;
}

.stat-label {
  font-size: 26rpx;
  color: #666;
  margin-top: 10rpx;
}

.assessment-chart {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.score-circle {
  position: relative;
}

.view-more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  padding: 16rpx;
  background-color: #f5f7fa;
  border-radius: 10rpx;
  color: #5289ff;
  font-size: 28rpx;
}

.view-more text {
  margin-right: 10rpx;
}

.progress {
  display: flex;
  align-items: center;
  justify-content: center;
}

.score {
  display: flex;
  align-items: center;
  justify-content: center;
}
.score-txt-box {
  background-color: #f8e5d9;
  border-radius: 50%;
  padding: 50rpx;
  margin: 0 20rpx;
}
.score-txt1 {
  color: #666;
  font-size: larger;
  font-weight: 600;
  // margin: 0 5rpx;
}
///* From Uiverse.io by Ratinax */
.radio-input {
  display: flex;
  // scale: 0.15;
  transform: rotate(180deg);
}
.enterprise-info {
  transform: translateY(-50rpx);
  display: flex;
  align-items: center;
  .enterprise-info-txt {
    font-size: 25rpx;
    color: #666;
  }
  .enterprise-info-image {
    width: 25rpx;
    height: 25rpx;
  }
}
.enterprise-name-box {
  display: flex;
  flex-direction: column;
  // align-items: center;
  justify-content: center;
  margin-top: 25rpx;
}

/* Import fonts if needed */
@font-face {
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  src: url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/rrtM1LP5iUzZ.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/o0Q3cO7cUfPA.woff")
      format("woff");
  font-display: swap;
}
.affiliation-container {
  margin-top: 20rpx; /* Spacing from element above */
}
.bottom.radius {
  width: 96%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 16rpx;
  box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.1);
  padding-bottom: 30rpx; /* Adjusted padding */
  overflow: hidden;
}
.center-title {
  position: relative;
  padding: 30rpx 20rpx 0 20rpx; /* Keep overall padding */
  font-weight: 600;
}
.index_title_left {
  font-family: "阿里妈妈数黑体 Bold", sans-serif;
  font-size: 32rpx;
  color: #333;
  font-weight: 800;
  margin-bottom: 30rpx; /* Space below the main title */
}
/* NEW: Wrapper for the two cards */
.cards-wrapper {
  display: flex;
  justify-content: space-between; /* Creates space between cards */
  gap: 20rpx; /* Alternative: Adds space between cards, remove justify-content if using gap */
  align-items: stretch; /* Make cards same height if content differs */
}
/* Styling for the individual cards (Fire Station, Third Party) */
.form-card {
  flex: 1; /* Allow cards to grow equally */
  min-width: 0; /* Prevent overflow issues in flex item */
  // width: calc(50% - 10rpx); /* Use this if using gap: 20rpx */
  // width: 48.5%; /* Use this if using justify-content: space-between and want a bit more gap visually */
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 0; /* Remove bottom margin as they are side-by-side */
  overflow: hidden;
  display: flex; /* Make form-card a flex container */
  flex-direction: column; /* Stack title and content vertically */
  /* Adjust fui-section style */
  /* Note: Deep selector syntax might vary slightly based on Vue/CSS preprocessor version */
  ::v-deep .fui-section {
    padding: 20rpx 24rpx 10rpx 24rpx !important; /* Adjust horizontal padding */
    margin-bottom: 0 !important;
    flex-shrink: 0; /* Prevent section from shrinking */
  }
  /* Target title color */
  ::v-deep .fui-section__title {
    color: #1a1a1a !important;
  }
}
/* Container for the details within each form-card */
.department-container {
  padding: 10rpx 24rpx 20rpx 24rpx; /* Adjust horizontal padding */
  flex-grow: 1; /* Allow content area to grow */
}
/* Header section (Icon + Name) */
.card-header2 {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
/* Icons (Firetruck, Building) */
.fire-icon,
.company-icon {
  width: 60rpx; /* Slightly smaller */
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 32rpx; /* Adjust icon size */
  margin-right: 16rpx;
  flex-shrink: 0;
}
.fire-icon {
  background-color: rgba(230, 67, 64, 0.1);
  color: #e64340;
}
.company-icon {
  background-color: rgba(32, 128, 240, 0.1);
  color: #2080f0;
}
/* Container for name and status */
.header-info {
  flex: 1;
  min-width: 0;
}
/* Name style */
.department-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Optional Status Tag (Keep if needed) */
// .status-tag { ... }
/* Contact details section */
.contact-section {
  margin-top: 15rpx;
}
/* Individual contact item */
.contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
  font-size: 26rpx;
  line-height: 1.5;
  &:last-child {
    /* SCSS syntax for last-child */
    margin-bottom: 0;
  }
}
/* If not using SCSS, target last-child like this: */
// .contact-item:last-child {
//   margin-bottom: 0;
// }
/* Label part */
.contact-icon {
  font-size: 26rpx;
  color: #555;
  margin-right: 8rpx;
  white-space: nowrap;
  flex-shrink: 0;
  // min-width: 110rpx; /* Optional fixed width for alignment */
}
/* Information part */
.contact-info {
  font-size: 26rpx;
  word-break: break-all;
  flex: 1;
  color: #010101;
  font-weight: 500;
  min-width: 0;
  text-align: left; /* Align info to the right if desired */
}
/* Styling for the empty state */
.empty-state {
  padding: 40rpx 24rpx; /* Match horizontal padding */
  text-align: center;
  color: #999999;
  font-size: 26rpx;
  flex-grow: 1; /* Allow empty state to fill space */
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
